<template>
	<div id="refund">
		<van-nav-bar title="申请退款" left-text="返回" left-arrow @click-left="onClickLeft" />
		<br />
		<van-divider :style="{ color: 'rgb(240, 173, 78)', borderColor: 'rgb(240, 173, 78)'}">退费须知</van-divider>
		<center>
			<b class="center-title2">（仅限已缴费用户使用<b class="center-title2">未缴费用户请勿申请</b>）</b>
		</center>
		<br />
		<!-- <b class="center-title3">1-发票报销以后可以申请退费</b><br /> -->
		<b class="center-title3">退费方式为原路返回，即退回到缴费渠道，例如用微信缴费，则退回到微信缴费账户；退费截图发送至联络人邮箱</b><br />
		<!-- <b class="center-title3">3-审批通过后，72h内会进行退费处理</b><br /><br /> -->
		#有疑问请联系：严经理，13164620214
		<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
			<el-form-item label="银行卡号" prop="card">
				<el-input v-model="ruleForm2.card" placeholder="请正确填写银行卡号"></el-input>
			</el-form-item>
			<el-form-item label="持卡人姓名" prop="name">
				<el-input v-model="ruleForm2.name" placeholder="请正确填写持卡人姓名"></el-input>
			</el-form-item>
			<el-form-item label="银行卡支行" prop="bank">
				<el-input v-model="ruleForm2.bank" placeholder="请正确填写银行卡支行"></el-input>
			</el-form-item>
		</el-form>
		<center>
			<van-button color="linear-gradient(to right, #4bb0ff, #1989fa)" class="btn" @click="submit('ruleForm2')">提交</van-button>
		</center>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				id:this.$route.params.id,
				ruleForm2:{
					card:'',
					name:'',
					bank:''
				},
				rules2: {
					card: [{
						required: true,
						message: '请填写银行卡号',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请填写持卡人姓名',
						trigger: 'blur'
					}],
					bank: [{
						required: true,
						message: '请填写银行支行地址',
						trigger: 'blur'
					}]
				}
			}
		},
		methods:{
			onClickLeft() {
				this.$router.go(-1);
			},
			submit(formName){
				let that = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						that.$axios.put('/api/consumer/refund/' + that.id,{
							invoiceRecord:that.refundID,
							card:that.ruleForm2.card,
							name:that.ruleForm2.name,
							bank:that.ruleForm2.bank,
						})
						.then(res => {
							if (res.data.code == 200) {
								that.$message({
									message: '申请退款成功，请等待处理结果！',
									type: 'success'
								});
								this.$router.go(-1);
							} else {
								that.$message({
									message: res.data.message,
									type: 'fail'
								});
							}
						})
					} else {
						return false;
					}
				});
			}
		},
		//缓存也会走的钩子
		activated() {
			this.id = this.$route.params.id;
		}
	}
</script>

<style lang="less">
	#refund {
		min-height: 100%;
		background: white;
		padding: 20px;
		box-sizing: border-box;

		.hr {
			border: 1px solid #c5cfdb;
		}

		.center-title {
			color: rgb(240, 173, 78);
			font-weight: bold;
		}

		.center-title2 {
			color: rgb(23, 140, 223);
			font-weight: bold;
		}

		.center-title3 {
			color: rgb(217, 83, 79);
			font-weight: bold;
		}
		.required-tag {
			color: #ee0a24;
			font-size: 30px;
		}
		.title{
			color: #323233;
			font-size: 30px;
		}
		.btn {
			width: 90%;
			margin-top: 80px;
		}
	}
</style>
